<template>
  <div class="common-tab">
    <el-tag
      v-for="(tag, index) in tags"
      :key="tag.name"
      :closable="tag.name !== 'home'"
      :effect="route.name === tag.name ? 'dark' : 'plain'"
      @click="handleTags(tag)"
      @close="handleClose(tag, index)"
    >
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, nextTick, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAllDataStore } from '@/stores'
const store = useAllDataStore()
const route = useRoute()
const router = useRouter()

const tags = computed(() => store.state.tags)

const handleClose = (tag, index) => {
  console.log('index  ', index)
  store.deleteMenu(tag)
  // 如果点击的关闭的是最后一个标签
  if (tag.name !== route.name) return
  if (index === store.state.tags.length) {
    router.push(tags.value[index - 1].name)
  } else {
    router.push(tags.value[index].name)
  }
}
const handleTags = (tag) => {
  console.log(tag.path)
  router.push(tag.path)
}
</script>
<style lang="less" scoped>
.common-tab {
  .el-tag {
    margin: 2px 15px;
  }
}
</style>
